<template>
  <div class="share-wrapper">
    <ShareNav />
    <div class="content-wrapper">
      <div class="qrcode-wrapper">
        <div>
          <div ref="qrcodeEl" class="qrcode"></div>
          <div class="qrcode-tips">请扫描二维码下载</div>
          <div class="qrcode-tips-small">注意：若使用微信扫码的手机，请点击右上角的按钮选择“用浏览器打开”</div>
        </div>
      </div>
      <div class="link-wrapper">
        <span>下载链接：</span>
        <a>{{ versionInfo.url }}</a>
        <span @click="copyLink(versionInfo.url)">复制</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import ShareNav from './components/ShareNav.vue'
import { showSuccessToast, showFailToast } from 'vant'
import MyService from '@/api/my'
import QRCode from 'qrcodejs2-fix'

// 获取最新版本信息
const versionInfo = ref({})
const qrcodeEl = ref()
const fetchVersionInfo = () => {
  MyService.getVersionInfo().then(res => {
    versionInfo.value = res || {}
    new QRCode(qrcodeEl.value, {
      text: res.url,
      width: 134,
      height: 134,
    })
  })
}
onMounted(() => {
  fetchVersionInfo()
})

const copyLink = (text: string) => {
  // 安卓
  const context = plus.android.importClass("android.content.Context")
  const main = plus.android.runtimeMainActivity()
  const clip = main.getSystemService(context.CLIPBOARD_SERVICE)
  plus.android.invoke(clip, 'setText', text)
  showSuccessToast('复制成功')
}
</script>

<style lang="less" scoped>
.share-wrapper {
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .content-wrapper {
    flex-grow: 1;
    overflow-y: scroll;
    z-index: 1;
    margin-top: -44px;
    border-radius: 19.23px 19.23px 0px 0px;
    background-color: #f5f5f5;
    padding: 16px;
    .qrcode-wrapper {
      width: 100%;
      height: 284.62px;
      background: #ffffff;
      border-radius: 7.69px;
      display: flex;
      align-items: center;
      justify-content: center;
      .qrcode {
        width: 134px;
        height: 134px;
        margin: 0 auto;
        background-color: #eeeeee;
      }
      .qrcode-tips {
        margin-top: 24px;
        text-align: center;
        font-weight: 500;
        color: #444444;
        font-size: 15.38px;
      }
      .qrcode-tips-small {
        margin-top: 32px;
        padding: 0 24px;
        font-size: 12px;
      }
    }
    .link-wrapper {
      padding: 16px;
      background: #ffffff;
      border-radius: 7.69px;
      margin-top: 10px;
      font-weight: 500;
      color: #444444;
      font-size: 13.46px;
      display: flex;
      a {
        width: 200px;
        word-wrap: break-word;
        color: #4389f3;
        margin-right: 8px;
      }
    }
  }
}
</style>
